<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        table {
            width: 800px;
            text-align: center;
            border-collapse: collapse;  /* 为table设置这个属性 */
        }
        th,td {
            border: 1px solid #000;
        }
        .hide {
            display: none;
        }
        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2,.edit-model{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
            text-align: center;
        }
    </style>

</head>
<body>

<h1>业务列表</h1>
<div>
    <input id="add_host" type="button" value="添加">
</div>


<!-- 遮罩层开始 -->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩层结束 -->

<!-- 弹出框开始 -->
<div id="i2" class="c2 hide">
    <form id="add_from" method="post" action="/cmdb/host">
        <div class="group">
            <label>
                <input type="text" placeholder="主机名" name="hostname"/>
            </label>
        </div>
        <div class="group">
            <label>
                <input type="text" placeholder="IP" name="ip"/>
            </label>
        </div>
        <div class="group">
            <label>
                <input type="text" placeholder="端口" name="port"/>
            </label>
        </div>

        <div class="group">
            <label>
                <select name="b_id">
                    {% for b in b_list %}
                        <option value="{{ b.id }}">{{ b.caption }}</option>
                    {% endfor %}
                </select>
            </label>
        </div>

        <input type="submit" value="提交" />
        <a id="ajax_submit" style="display: inline-block;padding: 5px;background: coral;">ajax_submit</a>
        <input id="cancel" type="button" value="取消" />
        <span id="error_msg" style="color: red"></span>
    </form>

</div>
<!-- 弹出框结束 -->


<!-- edit弹出框开始 -->
<div id="i3" class="edit-model hide">
    <form id="edit_from" method="post" action="/cmdb/host">
        <input type="text" name="hid" style="display: none">
        主机名:<input type="text" placeholder="主机名" name="hostname"/><br>
        IP:<input type="text" placeholder="IP" name="ip"/><br>
        端口:<input type="text" placeholder="端口" name="port"/><br>

        <select name="b_id">
            {% for b in b_list %}
                <option value="{{ b.id }}">{{ b.caption }}</option>
            {% endfor %}
        </select>
<br>
        <a id="ajax_submit_edit" style="display: inline-block;padding: 5px;background: coral;">确认编辑</a>
        <input id="ajax_cancel" type="button" value="取消" />
        <span id="error_msg" style="color: red"></span>
    </form>

</div>
<!-- edit弹出框结束 -->

<div>
     <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>主机ID</th>
            <th>主机名</th>
            <th>IP</th>
            <th>端口</th>
            <th>业务线编码</th>
            <th>业务线名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for row in v1 %}
        <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.nid }}</td>
            <td>{{ row.hostname }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.b_id }}</td>
            <td>{{ row.b.caption}}</td>
            <td>
                <a class="edit">编辑 |</a>
                <a class="delete"> 删除</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function (){
        $('#add_host').click(function (){
            $('.c1, .c2').removeClass('hide');
        });

        $('#cancel').click(function (){
            $('.c1, .c2').addClass('hide');
        });

        $('#ajax_submit').click(function (){
            $.ajax({
                url:'/cmdb/test_ajax',
                type:'GET',
                {#data:{'user':'root', 'pwd':'123'},#}
                data:$('#add_from').serialize(),
                success:function (data){
                    {#alert(data)#}
                    const obj = JSON.parse(data);
                    if (obj.status){
                        location.reload();
                    }else {
                        $('#error_msg').text(obj.error);
                    }
                }
            })
        });

        $('.edit').click(function (){
            $('.c1, .edit-model').removeClass('hide');
            const bid = $(this).parent().parent().attr('bid');
            const hid = $(this).parent().parent().attr('hid');
            $('#edit_from').find('select').val(bid);
            $('#edit_from').find('input[name="hid"]').val(hid);
            $.ajax({
                url:'/cmdb/test_ajax',
                type:'GET',
                data: $('#edit_from').serialize(),
            })

        });

        $('#ajax_cancel').click(function (){
            $('.c1, .edit-model').addClass('hide');
        });

    })
</script>
</body>
</html>